// 账号设置
import React, { useEffect } from 'react'
import md5 from 'blueimp-md5'
import { connect } from 'react-redux'
import { StoreState } from '../../../store/index'
import { UserInfoProps } from '../../../store/reducers/user'
import { RouteComponentProps, withRouter } from 'react-router-dom'
import {
  serviceUpdateUser,
  serviceGetUserConfig,
  serviceUpdateUserConfig,
} from '../../../request/user'
import { Form, Input, Button, Divider } from 'antd'

type Props = {
  userInfo: UserInfoProps
} & RouteComponentProps

const AccountPage: React.FC<Props> = function ({ userInfo }: Props) {
  const [form1] = Form.useForm()
  const [form2] = Form.useForm()
  async function handleUpdateUser() {
    try {
      const values = await form1.validateFields()
      serviceUpdateUser({ password: md5(values.password) })
    } catch {}
  }
  async function handleSckey() {
    try {
      const values = await form2.validateFields()
      serviceUpdateUserConfig({ sckey: values.sckey })
    } catch {}
  }

  useEffect(() => {
    serviceGetUserConfig().then(res => {
      if (res.data.success) {
        form2.setFieldsValue({
          sckey: res.data.data?.serverChanSckey || '',
        })
      }
    })
  }, [])

  return (
    <div className="account-setting">
      <Divider orientation="left" plain></Divider>
      <Form form={form1} layout="vertical" style={{ width: 300 }}>
        <Form.Item
          label="登录名"
          name="name"
          initialValue={userInfo.loginName}
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Input readOnly disabled></Input>
        </Form.Item>
        <Form.Item
          label="新密码"
          name="password"
          rules={[
            { required: true, message: '请输入密码' },
            {
              // .：匹配除 "\n" 之外的任何单个字符。要匹配包括 '\n' 在内的任何字符，请使用象 '[.\n]' 的模式。
              // {n,}：n 是一个非负整数。至少匹配n 次。例如
              pattern: /.{6,}/,
              message: '新密码至少6位',
            },
          ]}
        >
          <Input type="password" maxLength={32}></Input>
        </Form.Item>
        <br />
        <Form.Item>
          <Button type="primary" onClick={handleUpdateUser}>
            提交
          </Button>
        </Form.Item>
      </Form>
      {/* 「Server酱」，英文名「ServerChan」，是一款「手机」和「服务器」、「智能设备」之间的通信软件。
说人话？就是从服务器、路由器等设备上推消息到手机的工具。 */}
      <Divider orientation="left" plain>
        Server酱配置
      </Divider>
      <Form layout="vertical" form={form2} style={{ width: 300 }}>
        <Form.Item
          label="SCKEY"
          name="sckey"
          rules={[{ required: true, message: '请正确填写SCKEY' }]}
        >
          <Input maxLength={100}></Input>
        </Form.Item>
        <div style={{ marginTop: 5, textAlign: 'right' }}>
          <a href="http://sc.ftqq.com" target="_blank" rel="noopner noreferrer">
            如何获取？
          </a>
        </div>
        <Form.Item>
          <Button type="primary" onClick={handleSckey}>
            提交
          </Button>
        </Form.Item>
      </Form>
    </div>
  )
}

const mapStateToProps = ({ user }: StoreState) => {
  return { userInfo: user.userInfo }
}

export default connect(mapStateToProps)(withRouter(AccountPage))
